﻿<h2>Product Search</h2>
@using (@Html.BeginForm())
{    
    <p>
        <a href="/Product/Create">
            <input type="button" value="CREATE" />
        </a>
    </p>
    <input type="text" id="txtProductId" name="txtProductId"/>
    <input type="button" value="SEARCH" id="searchBtn"/>
    <div id="divlistproduct">

    </div>
}
@section Scripts{    
    
    <script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.9.2.min.js"></script>   
        
    <script type="text/javascript">
        $('#searchBtn').click(function () {
            var query = $('#txtProductId').val();
            if (!query)
                query = "";
                // search                               
            $.ajax({
                url: '/Product/GetListProduct',
                type: "POST",
                data: { query: query },
                dataType: "html",
                success: function (data) {
                    $('#divlistproduct').html('');
                    $('#divlistproduct').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Error when query data");
                }
            });
        });
    </script>
}